<template>
  <div class="content content54">
    <div>检测条件：温度T：<el-input v-model="form.temperature" class="input-line" />℃；气压p：<el-input v-model="form.pressure" class="input-line" />Kpa</div>
    <div class="innertitle">
      1.焦点剂量率：
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td rowspan="2"><div>
        准直器mm
        <el-select v-model="form.focalDosRate.collimatorType" placeholder="请选择">
            <el-option
              v-for="item in [{'value':0,'label':'直径'},{'value':1,'label':'尺寸'}]"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select></div></td>
        <td :colspan="focalDosRate.table.td+1">测量值Mu，Gy</td>
        <td rowspan="2">校准因子<br/><i>$N_k$</i></td>
        <td rowspan="2">校准值<i>$D_γ$</i><br/>Gy</td>
        <td rowspan="2">水中吸收剂量<i>$D_w$</i>，Gy</td>
        <td rowspan="2">焦点剂量率<br/>Gy/min</td>
      </tr>
      <tr>
        <td v-for="tdIndex in focalDosRate.table.td" :td="tdIndex">读数{{tdIndex}}</td>
        <td>平均值</td>
      </tr>
      <tr v-for="trIndex in focalDosRate.table.tr" :key="trIndex">
        <td><el-input v-model="form.focalDosRate['collimatorValue_'+trIndex]" class="input-line" /></td>
        <td v-for="tdIndex in focalDosRate.table.td" :td="tdIndex"><el-input v-model="form.focalDosRate['readoutValue_'+trIndex+'_'+tdIndex]" class="input-line" /></td>
        <td><el-input v-model="form.focalDosRate['averageValue_'+trIndex]" class="input-line" /></td>
        <td v-if="trIndex == 1" :rowspan="focalDosRate.table.tr"><el-input v-model="form.focalDosRate.calibrationFactor" class="input-line" /></td>
        <td><el-input v-model="form.focalDosRate['calibrationValue_'+trIndex]" class="input-line" /></td>
        <td><el-input v-model="form.focalDosRate['absorbedDose_'+trIndex]" class="input-line" /></td>
        <td><el-input v-model="form.focalDosRate['focalDosRate_'+trIndex]" class="input-line" /></td>
      </tr>
    </table>
    <div class="latex">
      <i>$D_w = D_r \cdot \frac {(\mu _{en} / \rho)_w}{(\mu_{en} / \rho)_m}$</i>
      ，&nbsp;&nbsp;<i>$\frac {(\mu _{en} / \rho)_w}{(\mu_{en} / \rho)_{有机玻璃}} = 1.031$</i>
      ，&nbsp;&nbsp;<i>$D_r = \frac {M_u \times N_{D,air} \times S_{w,air} \times P_{wall} \times P_{cav} \times P_{cel}} {PDD_s}$</i>
      ，&nbsp;&nbsp;<i>$N_{D,air} = N_k(1-g)k_{att}k_mk_cel$</i>
      ，&nbsp;&nbsp;<i>$P_{wall} = \frac {\alpha \times S_{wall,air} \times (\mu_{en} / \rho)_{w,,wall} + (1-\alpha) \times S_{W,air}}{S_{W,air}}$</i>
    </div>
    <div>
      剂量仪定时测量时间： 60 s
    </div>
    <div class="innertitle">
      2.焦点计划剂量与实测剂量的相对偏差：
    </div>
    <div>
      参考点计划剂量Dt：<el-input v-model="form.relativeDeviation.plannedDose" class="input-line" />Gy
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td>
          <div>
            <el-select v-model="form.relativeDeviation.collimatorType" placeholder="请选择">
                <el-option
                  v-for="item in [{'value':0,'label':'直径'},{'value':1,'label':'尺寸'}]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>mm
          </div>
        </td>
        <td>测量值<i>$M_u$</i><br/>Gy</td>
        <td>校准因子<i>$N_k$</i></td>
        <td>校准值<i>$D_r$</i><br/>Gy</td>
        <td>水中吸收剂量<i>$D_w$</i><br/>Gy</td>
        <td>相对偏差<i>$\Delta$</i><br/>%</td>
      </tr>
      <tr v-for="trIndex in relativeDeviation.table.tr" :key="trIndex">
        <td><el-input v-model="form.relativeDeviation['collimatorValue_'+trIndex]" class="input-line" /></td>
        <td><el-input v-model="form.relativeDeviation['measuredValue_'+trIndex]" class="input-line" /></td>
        <td v-if="trIndex==1" :rowspan="relativeDeviation.table.tr"><el-input v-model="form.relativeDeviation.calibrationFactor" class="input-line" /></td>
        <td v-if="trIndex==1" :rowspan="relativeDeviation.table.tr"><el-input v-model="form.relativeDeviation.calibrationValue" class="input-line" /></td>
        <td v-if="trIndex==1" :rowspan="relativeDeviation.table.tr"><el-input v-model="form.relativeDeviation.absorbedDose" class="input-line" /></td>
        <td v-if="trIndex==1" :rowspan="relativeDeviation.table.tr"><el-input v-model="form.relativeDeviation.relativeDeviation" class="input-line" /></td>
      </tr>
    </table>
    <div class="latex">
      <i>$\Delta = \frac {D_w-D_t}{D_t} \times 100 \%$</i>
    </div>
    <div class="innertitle">
      3.定位参考点与照射野中心的距离：
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td rowspan="2">
          <div>
            <el-select v-model="form.centerDistance.collimatorType" placeholder="请选择">
                <el-option
                  v-for="item in [{'value':0,'label':'直径'},{'value':1,'label':'尺寸'}]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>mm
          </div>
        </td>
        <td rowspan="2">测量值，mm</td>
        <td>X轴偏差<i>$d_x$</i></td>
        <td>Y轴偏差<i>$d_y$</i></td>
        <td>Z轴偏差<i>$d_z$</i></td>
      </tr>
      <tr>
        <td><el-input v-model="form.centerDistance.deviation_x" class="input-line" /></td>
        <td><el-input v-model="form.centerDistance.deviation_y" class="input-line" /></td>
        <td><el-input v-model="form.centerDistance.deviation_z" class="input-line" /></td>
      </tr>
      <tr>
        <td><el-input v-model="form.centerDistance.collimatorValue" class="input-line" /></td>
        <td>相对偏差d，mm</td>
        <td colspan="3"><el-input v-model="form.centerDistance.relativeDeviation" class="input-line" /></td>
      </tr>
    </table>
    <div class="latex">
      <i>$d=\sqrt {d^2_x + d^2_y + d^2_z}$</i>
    </div>
    <div class="innertitle" style="display: flex;justify-content: space-between;">
      4.照射野尺寸偏差：<span style="font-weight: normal;">计划照射剂量：<el-input v-model="form.dimensionalDeviation.plannedExposureDose" class="input-line" />Gy</span>
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center" v-for="tableIndex in dimensionalDeviation.table.table" :key="'table4'+tableIndex">
      <tr>
        <td>预设档，mm</td>
        <td v-for="tbodyIndex in dimensionalDeviation.table.tbody" :key="'tbody'+tbodyIndex" :colspan="dimensionalDeviation.table.td.length">
          <el-input v-model="form.dimensionalDeviation['defaultValue_'+((tableIndex-1) * dimensionalDeviation.table.tbody+tbodyIndex)]" class="input-line" />
        </td>
      </tr>
      <tr>
        <td>方向</td>
        <template v-for="tbodyIndex in dimensionalDeviation.table.tbody">
          <td v-for="(tdItem,tdIndex) in dimensionalDeviation.table.td" :key="'td'+tableIndex+tbodyIndex+tdIndex">{{tdItem}}</td>
        </template>
      </tr>
      <tr>
        <td style="min-width: 120px;">标称值，mm</td>
        <template v-for="tbodyIndex in dimensionalDeviation.table.tbody">
          <td v-for="(tdItem,tdIndex) in dimensionalDeviation.table.td" :key="'td'+tableIndex+tbodyIndex+tdIndex">
            <el-input v-model="form.dimensionalDeviation['nominalValue_'+((tableIndex-1) * dimensionalDeviation.table.tbody+tbodyIndex)+'_'+tdItem]" class="input-line" />
          </td>
        </template>
      </tr>
      <tr>
        <td>测量值，mm</td>
        <template v-for="tbodyIndex in dimensionalDeviation.table.tbody">
          <td v-for="(tdItem,tdIndex) in dimensionalDeviation.table.td" :key="'td'+tableIndex+tbodyIndex+tdIndex">
            <el-input v-model="form.dimensionalDeviation['measuredValue_'+((tableIndex-1) * dimensionalDeviation.table.tbody+tbodyIndex)+'_'+tdItem]" class="input-line" />
          </td>
        </template>
      </tr>
      <tr>
        <td>偏差，mm</td>
        <template v-for="tbodyIndex in dimensionalDeviation.table.tbody">
          <td v-for="(tdItem,tdIndex) in dimensionalDeviation.table.td" :key="'td'+tableIndex+tbodyIndex+tdIndex">
            <el-input v-model="form.dimensionalDeviation['deviation_'+((tableIndex-1) * dimensionalDeviation.table.tbody+tbodyIndex)+'_'+tdItem]" class="input-line" />
          </td>
        </template>
      </tr>
    </table>
    <div class="innertitle">
      5.照射野半影宽度：
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center" v-for="tableIndex in penumbraWidth.table.table" :key="'table'+tableIndex">
      <tr>
        <td>预设档，mm</td>
        <td v-for="tbodyIndex in penumbraWidth.table.tbody" :key="'tbody'+tbodyIndex" :colspan="penumbraWidth.table.td.length">
          <el-input v-model="form.penumbraWidth['defaultValue_'+((tableIndex-1) * penumbraWidth.table.tbody+tbodyIndex)]" class="input-line" />
        </td>
      </tr>
      <tr>
        <td>方向</td>
        <template v-for="tbodyIndex in penumbraWidth.table.tbody">
          <td v-for="(tdItem,tdIndex) in penumbraWidth.table.td" :key="'td'+(tableIndex-1)+tbodyIndex+tdIndex">
            <div v-if="tableIndex == 1">
              {{tdItem}}
            </div>
            <div v-else>
              <el-input v-model="form.penumbraWidth['direction_'+((tableIndex-1) * penumbraWidth.table.tbody+tbodyIndex)+'_'+(tdIndex+1)]" class="input-line" />
            </div>
          </td>
        </template>
      </tr>
      <tr>
        <td style="min-width: 120px;">左侧半影，mm</td>
        <template v-for="tbodyIndex in penumbraWidth.table.tbody">
          <td v-for="(tdItem,tdIndex) in penumbraWidth.table.td" :key="'td'+tableIndex+tbodyIndex+tdIndex">
            <el-input v-model="form.penumbraWidth['leftPenumbra_'+((tableIndex-1) * penumbraWidth.table.tbody+tbodyIndex)+'_'+tdItem]" class="input-line" />
          </td>
        </template>
      </tr>
      <tr>
        <td>右侧半影，mm</td>
        <template v-for="tbodyIndex in penumbraWidth.table.tbody">
          <td v-for="(tdItem,tdIndex) in penumbraWidth.table.td" :key="'td'+tableIndex+tbodyIndex+tdIndex">
            <el-input v-model="form.penumbraWidth['rightPenumbra_'+((tableIndex-1) * penumbraWidth.table.tbody+tbodyIndex)+'_'+tdItem]" class="input-line" />
          </td>
        </template>
      </tr>
    </table>
    <div class="innertitle">
      6.透过准直体的泄漏辐射率：
    </div>
    <div>
      定时测量时间：<el-input v-model="form.leakageRadiationRate.second" class="input-line" />s   <el-select v-model="form.leakageRadiationRate.collimatorType" placeholder="请选择">
                <el-option
                  v-for="item in [{'value':0,'label':'直径'},{'value':1,'label':'尺寸'}]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>：<el-input v-model="form.leakageRadiationRate.collimatorValue" class="input-line" />mm
      ，&nbsp;&nbsp;<i>$\eta = \frac {D_0}{D_{18}} \times 100 \%$</i>
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center" >
      <tr>
        <td style="position: relative;">
          <div style="position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 320px;
      height: 1px;
      background-color:#000;
      transform: rotate(5.3deg);
      transform-origin: top left;"></div>
        </td>
        <td v-for="tdIndex in leakageRadiationRate.table.td" :key="tdIndex">读数{{tdIndex}}</td>
        <td>平均值</td>
      </tr>
      <tr>
        <td>准直器关闭时测量值<i>$D_0$</i>，Gy</td>
        <td v-for="tdIndex in leakageRadiationRate.table.td" :key="tdIndex">
          <el-input v-model="form.leakageRadiationRate['readoutValueClose_'+tdIndex]" class="input-line" />
        </td>
        <td>
          <el-input v-model="form.leakageRadiationRate.averageClose" class="input-line" />
        </td>
      </tr>
      <tr>
        <td style="min-width: 150px;">准直器直径为18mm时测量值<i>$D_{18}$</i>，Gy</td>
        <td v-for="tdIndex in leakageRadiationRate.table.td" :key="tdIndex">
          <el-input v-model="form.leakageRadiationRate['readoutValue_'+tdIndex]" class="input-line" />
        </td>
        <td>
          <el-input v-model="form.leakageRadiationRate.average" class="input-line" />
        </td>
      </tr>
      <tr>
        <td>泄漏辐射率η，%</td>
        <td :colspan="leakageRadiationRate.table.td+1">
          <el-input v-model="form.leakageRadiationRate.leakageRadiationRate" class="input-line" />
        </td>
      </tr>
    </table>
    <div class="innertitle" style="display: flex;justify-content: space-between;">
      7.非治疗状态下设备周围的杂散辐射水平：<span style="font-weight: normal;"><i>$K=K_1 \cdot f$</i></span>
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center" style="position: relative;top: 3px;">
      <tr>
        <td>本底测量值,nGy/h</td>
        <td v-for="tdIndex in strayRadiationLevel.table.td" :key="tdIndex">
          <el-input v-model="form.strayRadiationLevel['background_'+tdIndex]" class="input-line" />
        </td>
        <td>校准因子f</td>
        <td>1.01</td>
      </tr>
    </table>
    <table border="1" cellspacing="0" cellpadding="0" align="center" >
      <tr>
        <td>检测结果K<br/>μGy/h</td>
        <td>距设备外表面<br/>5cm处</td>
        <td><el-input v-model="form.strayRadiationLevel.result_1" class="input-line" /></td>
        <td>距设备外表面<br/>60cm处</td>
        <td><el-input v-model="form.strayRadiationLevel.result_2" class="input-line" /></td>
      </tr>
      <tr>
        <td colspan="5">附注：1.下图中阴影区域内各位点测量值K1；2.检测结果取各位点剂量率最大值且未扣除本底值。</td>
      </tr>
    </table>
    <div style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
      <img src="@/assets/images/test_item54/form7_1.png" alt="" style="margin-right: 50px;">
      <div>非治疗状态下X-Z平面上杂散辐射空气比释动能率检测点分布图</div>
      <img src="@/assets/images/test_item54/form7_2.png" alt="" style="margin-right: 50px;">
      <div>非治疗状态下X-Y平面上杂散辐射空气比释动能率检测点分布图</div>
    </div>
  </div>
</template>

<script>
  import {getInfoById, postInfo} from '@/api/testItem/item54'
  export default{
    name:'testItem54',
    props: {
    	// tab栏
      activeNameEquipment: {
    		type: String,
        default: "0",
      },
    	// 基本信息数据
      basicForm: {
    		type: Object,
        default: () => {
    			return {}
    		},
      },
    },
    data(){
      return{
        initFlag:false,
        "sdd": {
          action:'saveInfo',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
        },
        "focalDosRate": {
          action:'focalDosRate',
          flag:true,
          loading:false,
          notNumber:['collimatorType'],
          intNumber:[],
          like:false,
          table:{
            td:3,
            tr:2
          }
        },
        "relativeDeviation": {
          action:'relativeDeviation',
          flag:true,
          loading:false,
          notNumber:['collimatorType'],
          intNumber:[],
          like:false,
          table:{
            tr:8
          }
        },
        "centerDistance": {
          action:'centerDistance',
          flag:true,
          loading:false,
          notNumber:['collimatorType'],
          intNumber:[],
          like:false,
        },
        "dimensionalDeviation": {
          action:'dimensionalDeviation',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
          table:{
            table:2,
            tbody:4,
            td:['x','y','z']
          }
        },
        "penumbraWidth": {
          action:'penumbraWidth',
          flag:true,
          loading:false,
          notNumber:['direction'],
          intNumber:[],
          like:true,
          table:{
            table:2,
            tbody:4,
            td:['x','y','z']
          }
        },
        "leakageRadiationRate": {
          action:'leakageRadiationRate',
          flag:true,
          loading:false,
          notNumber:['collimatorType'],
          intNumber:['second'],
          like:false,
          table:{
            td:3
          }
        },
        "strayRadiationLevel": {
          action:'strayRadiationLevel',
          flag:true,
          loading:false,
          notNumber:[],
          intNumber:[],
          like:false,
          table:{
            td:5
          }
        },
        "form": {
          "itemsId": 0,
          "resultId": 0,
          "temperature": 0.0,
          "pressure": 0.0,
          "focalDosRate": {
            "itemsId": 0
          },
          "relativeDeviation": {
            "itemsId": 0
          },
          "centerDistance": {
            "itemsId": 0
          },
          "dimensionalDeviation": {
            "itemsId": 0
          },
          "penumbraWidth": {
            "itemsId": 0
          },
          "leakageRadiationRate": {
            "itemsId": 0
          },
          "strayRadiationLevel": {
            "itemsId": 0
          }
        }
      }
    },
    watch:{
      activeNameEquipment: {
        handler(val) {
          this.$nextTick(()=>{
            let resultId = this.basicForm.resultId;
            getInfoById(resultId).then(response => {
              if(response.code == 200){
                let data = response.data;
                for(let keys in data){
                  this.setData(keys,data[keys]);
                }
                 setTimeout(()=>{
                   this.initFlag = true;
                 },300)
              }
            }).catch((response) => {
               this.$emit("loadingchange", true);
             });
             });
        },
        deep: true,
        immediate: true
      },
      "form.focalDosRate":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'focalDosRate');
         }
        },
        deep:true,
      },
      "form.relativeDeviation":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'relativeDeviation');
         }
        },
        deep:true,
      },
      "form.centerDistance":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'centerDistance');
         }
        },
        deep:true,
      },
      "form.dimensionalDeviation":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'dimensionalDeviation');
         }
        },
        deep:true,
      },
      "form.penumbraWidth":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'penumbraWidth');
         }
        },
        deep:true,
      },
      "form.leakageRadiationRate":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'leakageRadiationRate');
         }
        },
        deep:true,
      },
      "form.strayRadiationLevel":{
        handler(newName, oldName) {
         if(this.initFlag){
          this.validateData(newName,'strayRadiationLevel');
         }
        },
        deep:true,
      },
      "form.temperature":{
          handler(newName, oldName) {
            if(this.initFlag){
             this.validateData(this.form,'sdd');
            }
          },
        },
      "form.pressure":{
        handler(newName, oldName) {
          if(this.initFlag){
           this.validateData(this.form,'sdd');
          }
        },
      },
    },
    methods:{
      //修改数据
      setData(name,data){
        this.form[name] = data ? data : (this[name] ? {}:null);
      },
      //表单修改提交后端
       postForm(param,name){
         param['itemsId'] = this.form.itemsId;
         this.$emit("loadingchange", true);
      	 postInfo(param,this[name].action).then(res=>{
      		 this.$emit("loadingchange", false);
      		 if(res.code == 200){
      			 this[name].flag = false;
      			 if(name != 'sdd'){
      				this.setData(name,res.data);
      			 }
      		 }
      	 })
      },
      validateType(arr,keys,obj){
      	if(obj.like){
      		for(let i=0;i<arr.length;i++){
      			if(keys.indexOf(arr[i]) != -1){
      				return true;
      			}
      		}
      		return false;
      	}else{
      		if(arr.indexOf(keys) != -1){
      			return true;
      		}
      		return false;
      	}
      },
       //数据验证
       validateData(newName,myName){
      	 if(!this[myName].noClear){
      		clearTimeout(this[myName].loading);
      	 }else{
      		 this[myName].noClear = false;
      	 }
         let regNumber = /^[-]?\d*([.](\d+))?$/;//小数验证正则
         let regRepNumber = /[^-?\d.,]/g;//将除小数外的符号消除正则
         let regInt = /^\d*$/;//整数验证正则
         let regRepInt = /[^-?\d,]/g;//将除小数外的符号消除正则
         let reg,regRep;
         let repStr = '';
      	 let intResult
         if(JSON.stringify(newName) != '{}'){
           //遍历该对象所有字段进行验证
           for(let keys in newName){
             //数字验证环节
      			 if((typeof newName[keys] == 'string') ||  (typeof newName[keys] == 'number')){
      				if(newName[keys] && !this.validateType(this[myName].notNumber,keys,this[myName])){
      					intResult = this.validateType(this[myName].intNumber,keys,this[myName]);
      					reg = intResult ? regInt:regNumber;
      				  let bool = !reg.test(newName[keys]);
      				  if(bool){
      						setTimeout(()=>{
      							intResult = this.validateType(this[myName].intNumber,keys,this[myName]);
      							regRep = intResult ? regRepInt:regRepNumber;
      									repStr = newName[keys] + '';
      							repStr =  repStr.replace(regRep,'');
      							if(repStr != (newName[keys]+'')){
      								if(!this[myName].noClear){
      									this[myName].noClear = true;
      								}
      								newName[keys] = repStr;
      							}
      						},100);
      						if(this[myName].flag){
      						 this[myName].flag = false;//如果数字验证不通过不需要请求后端
      						}
      				  }
      				}
      			 }
           }
      		 this.isPost(newName,myName);
         }
       },
       isPost(newName,myName){
      	 if(this[myName].flag){//是否请求后端判断
      	  let postBody = {};
      	  for(let i in newName){
      	    if(newName[i] !== null && newName[i] !== undefined){
      	      postBody[i] = newName[i];
      	    }
      	  }
      	  if(JSON.stringify(postBody) != '{}'){
      			this[myName].loading = setTimeout(()=>{
      				this.postForm(postBody,myName);
      			},800)
      	  }
      	 }else{
      		 this[myName].flag = true;
      	 }
       },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../content.scss';

  .miniFont {
    font-size: 10px;
  }

  .miniFontCenter {
    margin-top: 8px;
  }

  .content54 {
    padding-inline: 0 !important;
    ::v-deep .el-input__suffix{
      display: none;
    }
    .latex{
      margin-top: 15px;
    }
    table {
      width: 100%;

      td {
        max-width: 100px;

        ::v-deep .el-checkbox__label {
          white-space: break-spaces;
        }
      }

      .el-input {
        width: 100% !important;
      }

      .multipleInput {
        .el-input {
          width: 50px !important;
        }
      }
    }

    .innertitle {
      display: block;
      margin-left: 0;
    }

    .table1 {
      .el-radio {
        display: flex;
        align-items: center;
      }
    }

    #hearderTR td:nth-child(7) {
      display: none;
    }
  }
</style>
